<template>
  <div class="swiper">
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <template v-for="(item, index) in housePics" :key="item.houseId">
        <van-swipe-item>
          <div class="pic">
            <img :src="item.url" alt="" />
          </div>
        </van-swipe-item>
      </template>
      <!-- 自定义指示器 -->

      <template #indicator="{ active, total }">
        <div class="custom-indicator">
          <template v-for="(value, key, index) in swipeGroup" :key="key">
            <div
              class="item"
              :class="{
                active: housePics[active]?.enumPictureCategory == key,
              }"
            >
              <span class="text">{{ getNewText(value[0].title) }}</span>
              <span
                class="count"
                v-if="housePics[active]?.enumPictureCategory == key"
              >
                <!-- getCategoryIndex(housePics[active]) -->
                {{ active + 1 }}/{{ total }}
              </span>
            </div>
          </template>
        </div>
      </template>
    </van-swipe>
  </div>
</template>

<script setup>
import { toRaw, computed, reactive, watch, ref } from "vue"
import { storeToRefs } from "pinia"

import { useDetailStore } from "@/stores/modules/detail"

const props = defineProps({
  housePics: {
    typeof: Array,
    default: () => [],
  },
})
const storeData = useDetailStore()

// 处理 数组分类
const swipeGroup = reactive({})

for (const item of props.housePics) {
  // [item.enumPictureCategory] : fliter(()=> item.enumPictureCategory)
  // 获取的是 类别相同的对象数据
  let valueArray = swipeGroup[item.enumPictureCategory]
  if (!valueArray) {
    valueArray = []
    swipeGroup[item.enumPictureCategory] = valueArray
  }
  valueArray.push(item)
}

// 对 text 进行处理
const getNewText = (text) => {
  // 匹配全角半角
  // const reg = /[\uFF00-\uFFEF]*/;

  // 匹配中文
  const regs = /[\u4E00-\u9FA5\uF900-\uFA2D]{2}/
  // 返回的是一个数组
  const newTextArray = regs.exec(text)
  // console.log(newTextArray)
  return newTextArray[0]
}

// 对索引进行处理
</script>

<style lang="less" scoped>
.pic {
  img {
    width: 100%;
    height: 100%;
  }
}

.custom-indicator {
  position: absolute;
  right: 5px;
  bottom: 5px;
  padding: 2px 3px;
  font-size: 10px;
  text-shadow: 0.3px 0.4px #fff;
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(0, 0, 0, 0.5);
  border-radius: 5px;
  color: #fff;
  display: flex;
  .item {
    margin: 0 3px;
    &.active {
      padding: 0 3px;
      border-radius: 5px;
      background-color: #fff;
      color: #333;
      text-shadow: 0.4px 0.3px #333;
    }
  }
}
</style>
